<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from 'echarts';
import {policyThemeData} from "../data/data.js"

const BarECharts = ref(null)
const props = defineProps(['colors', 'count'])


const initEcharts = ((item) => {
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      color:['#73a0fa','#2167fa','#5d72fb','#73deb3','#ff943d','#fe6f50','#7585a2','#9bc5ff'],
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        orient: 'vertical',
        right: '10%',
        formatter: function (name) {
          return name + '      ' + policyThemeData.find(item => item.name === name).value + '%'
        }
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          center: ['35%', '40%'],
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: true
          },
          data: policyThemeData
        }
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})
watch(() => props.tableData, (newValue, oldValue) => {
  initEcharts(newValue)
}, {immediate: true, deep: true})

onMounted(() => {
  initEcharts(props.tableData)
})

</script>

<style lang="less" scoped>
</style>
